<template>
	<!-- 厉川 _ 报价详情-->
	<view class="details" style="width: 750rpx;overflow-x: hidden;overflow-y: hidden;" v-show="hideLoadingImage">
		<view class="details_top">
			<view class="detailsStatusBar" :style="'height:'+statusBarHeight + 'px'"></view>
			<view class="detailsBar" :style="'top:'+ statusBarHeight + 'px'">
				<view class="detailsBar_icon" @click="goLcOffer">
					<u-icon name="arrow-left" color="#FFFFFF" size="40" v-if="previous"></u-icon>
					<view v-else>首页</view>
				</view>
				<view class="detailsBar_title">
					<!-- {{detailsList.name}} -->
				</view>
			</view>
		</view>
		<view class="details_content" :style="'padding-top:'+(statusBarHeight*2+80) + 'rpx'">
			<view class="details_content-image">
				<!-- <image src="https://z3.ax1x.com/2021/08/17/fhD7M8.png" mode="widthFix"></image> -->
				<image :src="detailsList.image" mode="widthFix" @load="loadImage"></image>
			</view>
			<view class="details_content_form">
				<view class="details_content_form_">
					<!-- <view class="details_content_form_title">您的联系方式</view> -->
					<view class="details_content_form_title"><image src="https://z3.ax1x.com/2021/08/18/foiuVA.png"></image></view>
					<view class="details_form">
						<form @submit="formSubmit" @reset="formReset">
							<input class="uni-input_" name="username" placeholder="请输入您的姓名" v-model="dataUser.username" @blur="blurInput"/>
							<input class="uni-input_" name="mobile" placeholder="请输入您的电话" v-model="dataUser.mobile" @blur="blurInput"/>
							<input class="uni-input_" name="industry" placeholder="请输入您所属的行业" v-model="dataUser.industry" @blur="blurInput"/>
							<view class="uni-input_position">
								<input @click="getPoition" class="uni-input_" :disabled="true" name="position" placeholder="请选择您所在的位置" :value="valuePosition"/>
								<image src="https://z3.ax1x.com/2021/08/18/fTsKsI.png"></image>
								<u-picker v-model="showPoition" mode="region" @confirm="confirmPoition"></u-picker>
							</view>
							<view class="uni-input_view">
								<view class="uni-input_view_">您希望我们在什么时间段内联系您</view>
								<view class="uni-input_view_time" name="timeCurrent">
									<view @click="setTime(item.id,index)" v-for="(item,index) in detailsList.time" :key="index" :class="" :class="timeIdex[index] == index ? ' time_current' : ''">{{item}}</view>
									<!-- <view @click="setTime(item.id,index)" v-for="(item,index) in timeList" :key="index" :class="" :class="timeIdex[index] == item.id ? 'time_current' : ''">{{timeIdex[index] + '===='+ item.id}}</view> -->
								</view>
							</view>
							<button class="details_form_submit" :class="dataCorrect ? ' details_form_submit_dataCorrect': ''" form-type="submit">提交联系方式</button>
							<button v-show="false" class="details_form_submit" form-type="reset" ref="resrtBtn">Reset</button>
						</form>
					</view>
				</view>
			</view>
			
			<button open-type="share" class="details_share">
				<view class="details_share_">
					<image src="https://z3.ax1x.com/2021/08/18/fTsuQA.png"></image>
					<view class="details_share_title">分享</view>
				</view>
			</button>
		</view>
		<view class="details_bg100"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideLoadingImage: false,
				paramId: null,
				previous: false,
				dataCorrect: false,
				dataUser: {
					username: '',
					industry: '',
					mobile: '',
				},
				detailsList: [],
				statusBarHeight: "25",
				detailsBarTitle: "XX行业",
				showPoition: false,
				valuePosition: '',
				timeIdex: [-1, -1, -1],
				newIndex: -1,
				timeList:[
					{
						id:0,
						value: "9:00-12:00"
					},
					{
						id:1,
						value: "12:00-12:30"
					},
					{
						id:2,
						value: "14:00-19:00"
					}
				]
			}
		},
		onLoad(param) {
			uni.showLoading({
				title: "加载中..."
			})
			this.init(param)
		},
		watch: {
			 dataUser: {
			      handler(newName,oldName) {
			        console.log("newName===>",newName)
			      },
			      deep: true,
			      immediate: true
			    }
		},
		onShareAppMessage() {
			return {
				path: "pages/lc/details/details?id=" + this.paramId,
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: this.detailsList.name,
				imageUrl: 'https://z3.ax1x.com/2021/08/18/fTsmzd.png',
			}
		},
		methods: {
			init(param) {
				this.previous = param.previous
				this.paramId = param.id
				
				uni.getSystemInfo({
					success:res => {
						this.statusBarHeight = res.statusBarHeight;
						console.log(this.statusBarHeight)
					},
				});
				
				this.$api.industies({
					ljUrl:param.id
				}).then(res => {
					console.log("res-ljUrl",res)
					this.detailsList = res.data
					console.log("detailsList", this.detailsList)
				})
				
			},
			getPoition() {
				this.showPoition = !this.showPoition
				console.log("获取位置")
			},
			confirmPoition(e) {
				console.log("e,",e)
				this.valuePosition = e.province.label + '·' + e.city.label + '·' + e.area.label
				this.blurInput()
			},
			setTime(id,index){
				let _index = this.timeIdex.indexOf(index)
				if(_index == -1){
					this.timeIdex[index] = index
				}else{
					this.timeIdex[index] = -1;
				}
				this.blurInput()

				// let _index = this.timeIdex.indexOf(id)
				// if(_index == -1){
				// 	this.timeIdex.push(id)
				// }else{
				// 	this.timeIdex.splice(_index,1)
				// }
				this.$forceUpdate();
				console.log("this.timeIdex",this.timeIdex)
			},
			formSubmit(e) {
				console.log("提交表单")
				uni.showLoading({
					title: "提交中..."
				})
				let _data = e.detail.value
				let _dataTime1 = []
				for(let i in this.timeIdex){
					if(this.timeIdex[i] != -1){
						_dataTime1.push(this.detailsList.time[this.timeIdex[i]])
					}
				}
				_data.time = _dataTime1.join(',')
				for(let key in _data){
					let item = _data[key];
					 if(key == "username" && !/^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/.test(item)){
		                    this.showToast('请输入正确格式的姓名');
		                    return;
		              }else if(key == "mobile" && !/^1[3456789]\d{9}$/.test(item)){
		                    this.showToast('请输入正确格式的手机');
		                    return;
		              }else if(key == "industry" &&  (item=="")){
		                    this.showToast('请输入所属行业');
		                    return;
		              }else if(key == "position" && (item=="")){
		                    this.showToast('请选择城市');
		                    return;
		              }else if(key == "time" && (item.length == 0)){
		                    this.showToast('请选择预约的时间段');
		                    return;
		              }
				}
				this.$api.projectsMessage({
					data:{
						username: _data.username,
						time: _data.time,
						industry: _data.industry,
						mobile: _data.mobile,
						position: _data.position
					}
				}).then(res => {
					console.log("res,", res)
					if(res.code == 200){
						this.dataCorrect = false
						// this.showToast("提交成功")
						uni.hideLoading()
						uni.showToast({
							title: "提交成功",
							image: "../../../static/cg.png",
						})
						this.dataUser = {
							username: '',
							industry: '',
							mobile: '',
						}
						this.valuePosition = ''
						this.timeIdex = [-1, -1, -1]
						
					}
				})
			},
			blurInput(){
				console.log("输入完成")
				let _data = this.dataUser
				_data.position = this.valuePosition
				let _dataTime1 = []
				for(let i in this.timeIdex){
					if(this.timeIdex[i] != -1){
						_dataTime1.push(this.detailsList.time[this.timeIdex[i]])
					}
				}
				_data.time = _dataTime1.join(',')
				for(let key in _data){
					let item = _data[key];
					 if(key == "username" && !/^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/.test(item)){
							this.dataCorrect = false
		                    return;
		              }else if(key == "mobile" && !/^1[3456789]\d{9}$/.test(item)){
							this.dataCorrect = false
		                    return;
		              }else if(key == "industry" &&  (item=="")){
							this.dataCorrect = false
		                    return;
		              }else if(key == "position" && (item=="")){
							this.dataCorrect = false
		                    return;
		              }else if(key == "time" && (item.length == 0)){
							this.dataCorrect = false
		                    return;
		              }
				}
				this.dataCorrect = true
				
				
			},
			goLcOffer() {
				if(this.previous){
					uni.navigateBack()
				}else{
					uni.navigateTo({
						url: "../../index/index"
					})
				}
				
			},
			showToast(title) {
				uni.hideLoading()
				uni.showToast({
					title: title,
					icon: "none"
				})
			},
			loadImage() {
				setTimeout(()=>{
					this.hideLoadingImage = true
					uni.hideLoading()
				},100)
				
			}
		}
	}
</script>

<style>
	.details_bg100{
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: -1;
		background-color: #000000;
	}
	.details{
		background-color: #000000;
	}
	.details_top{
		width: 750rpx;
		color: #ffffff;
		/* background-color: #FFFFFF; */
	}
	.detailsStatusBar{
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #000000;
	}
	.detailsBar{
		width: 100%;
		height: 80rpx;
		position: fixed;
		background-color: #000000;
	}
	.detailsBar_icon{
		/* width: 56rpx; */
		height: 56rpx;
		margin: 14rpx 0 0 14rpx;
		display: inline-block;
		font-size: 32rpx;
	}
	.detailsBar_title{
		position: absolute;
		top: 12rpx;
		left: 50%;
		transform: translate(-50%);
		font-weight: 600;
		font-size: 32rpx;
		line-height: 44rpx;
	}
	.details_content{
		width: 750rpx;
		/* position: relative; */
	}
	.details_content-image{
		background-color: #000000;
		padding-bottom: 38rpx;
	}
	.details_content-image image{
		width: 750rpx;
	}
	.details_content_form{
		width: 750rpx;
		background-color: #000000;
		padding-bottom: 344rpx;
		/* border-radius: 20px 20px 0px 0px; */
	}
	.details_content_form_ {
		padding: 46rpx 40rpx 0 40rpx;
	}
	.details_content_form_title{
		line-height: 62rpx;
		font-size: 48rpx;
		text-align: center;
		color: #F45307;
		margin-bottom: 4rpx;
	}
	.details_content_form_title image{
		width: 280rpx;
		height: 70rpx;
	}
	.details_form{
		font-size: 34rpx;
		width: 670rpx;
	}
	.uni-input_{
		color: #FFFFFF;
		margin-top: 24rpx;
		padding-left: 28rpx ;
		height: 104rpx;
		border-radius: 12px;
		border: 1.5px solid rgba(244,83,7,0.20);
		background: rgba(255,255,255,0.10);
		box-shadow: 0px 8rpx 16rpx 0px rgba(0,0,0,0.02); 
	}
	.uni-input_position{
		position: relative;
	}
	.uni-input_position image{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 36rpx;
		right: 28rpx;
		/* z-index: 2; */
	}
	.uni-input_view{
		margin-top: 24rpx;
		height: 208rpx;
		border-radius: 12px;
		border: 1.5px solid rgba(244,83,7,0.20);
		background: rgba(255,255,255,0.10);
		box-shadow: 0px 8rpx 16rpx 0px rgba(0,0,0,0.02); 
	}
	.uni-input_view_{
		margin: 28rpx 0 28rpx 28rpx;
		color: #FFFFFF;
		opacity: 0.32;
	}
	.uni-input_view_time{
		margin-left: 28rpx;
	}
	.uni-input_view_time view{
		height: 72rpx;
		width: 194rpx;
		display: inline-block;
		line-height: 40rpx;
		background: #000000;
		border-radius: 8rpx;
		text-align: center;
		padding-top: 16rpx;
		margin-right: 16rpx;
		color: #FFFFFF;
		/* opacity: 0.6; */
		font-size: 28rpx;
		border: 1px solid #000000;
	}
	.details_form_submit{
		opacity: 0.2;
		color: #FFFFFF;
		background-color: #f45408;
		border-radius: 24rpx;
		box-shadow: 0px 8rpx 16rpx 0px rgba(244,84,8,0.20); 
		font-size: 34rpx;
		width: 370rpx;
		height: 88rpx;
		margin: 56rpx 0 0 0;
		font-weight: 500;
		line-height: 48rpx;
		padding-top: 20rpx;
		position: relative;
		left: 50%;
		transform: translate(-50%);
	}
	.details_form_submit_dataCorrect{
		opacity: 1;
	}
	.time_current{
		background: #f45408 !important;
		border: 1px solid #f45408 !important;
		color: #ffffff !important;
		font-weight: bold;
	}
	
	.details_share{
		width: 750rpx;
		height: 148rpx;
		position: fixed;
		bottom: 0rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		text-align: center;
		z-index: 2;
		background-color: #000000;
		
	}
	.details_share_{
		width: 702rpx;
		height: 96rpx;
		border-radius: 24rpx;
		margin-top: 24rpx;
		background-color: #f45307;
	}
	.details_share image{
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		margin-top: 32rpx;
		vertical-align: top;
		color: #FFFFFF;
	}
	.details_share_title{
		color: #FFFFFF;
		display: inline-block;
		font-size: 34rpx;
		margin: 8rpx 0 0 6rpx;
		vertical-align: top;
	}
	

</style>
